<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入外部js文件 -->
     <script src="js/jquery-1.8.3.js"></script>
     <style>
         .p1{
             border: 1px solid blue;
             display: inline-block;
             padding: 5px 20px;
             width: 100px;
             text-align: center;
         }
     </style>
</head>
<body>
    <span class="p1" id="stone-1">
        石头
    </span>
    VS
    <span class="p1" id="stone-2"> 
        石头
    </span>
   
    <div style="margin-top:20px">
        <button id="start">开始</button>
        <button id="stop">停止</button>
    </div>
    
    <script>
        $(document).ready(function(){
            var data = new Array("石头","剪刀","布");
            var myInterval = null;
            $("#start").click(function(){
                myInterval = setInterval(function(){
                    var index1 = Math.ceil(Math.random()*3)-1;
                    var index2 = Math.ceil(Math.random()*3)-1; 
                    $("#stone-1").html(data[index1]);
                    $("#stone-2").html(data[index2]);
                },50);            
            });
            $("#stop").click(function(){
                clearInterval(myInterval);
            });
        });
    </script>
</body>
</html>